<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>个人中心-基本资料-绑定邮箱</title>
    <div data-th-replace="~{fragment/common :: common}"></div>
</head>
<body>
<div data-th-replace="~{fragment/header :: header}"></div>
<div class="body-container container" style="margin-top: 20px">
    <div class="col-sm-2 my-nav">
        <ul data-th-replace="~{fragment/my-nav :: my-nav(activeUrl='my')}"></ul>
    </div>
    <div class="col-sm-10 my-content">
        <div class="panel panel-default">
            <!-- Default panel contents -->
            <div class="panel-heading">绑定邮箱</div>
            <div class="panel-body">
                <div class="col-sm-6">
                    <form action="/my/email/valid" method="post" data-th-action="@{/my/email/valid}">
                        <br>
                        <div class="input-group">
                            <span class="input-group-addon">邮箱号</span>
                            <input type="email" id="emailInput" required autofocus="autofocus" autocomplete name="email"
                                   data-th-value="${user.email}" class="form-control"/>
                        </div>
                        <br>
                        <button class="btn btn-warning" id="sendValidCodeBtn" onclick="return sendValidCode();">发送验证码
                        </button>
                        &emsp;&emsp;<span style="color:green;" id="sendSuccess"></span><span style="color:red;"
                                                                                             id="sendFailed"></span>
                        <br><br>
                        <div class="input-group">
                            <span class="input-group-addon">验证码</span>
                            <input type="text" minlength="6" required maxlength="6" name="validCode"
                                   class="form-control"/>
                        </div>
                        <br>
                        <input type="submit" class="btn btn-primary" value="确认绑定">
                    </form>
                </div>
            </div>


        </div>
    </div>
    <script type="application/javascript">
        function sendValidCode() {
            $("#sendFailed").html("");
            $("#sendSuccess").html("");
            $('#sendValidCodeBtn').attr('disabled', "true");//添加disabled属性
            var emailInput = document.getElementById("emailInput");
            var email = emailInput.value;
            var validityState = emailInput.validity;
            // console.log(validityState);
            if (validityState.valueMissing || validityState.typeMismatch) {
                $("#sendFailed").html("邮箱格式不正确！");
                $('#sendValidCodeBtn').removeAttr("disabled"); //移除disabled属性
            } else {
                $("#sendSuccess").html("发送中...");
                $.post("/my/email/code", {email: email}, function (result) {
                    if (result.code > 0) {
                        $("#sendSuccess").html("");
                        $("#sendSuccess").html(result.msg);
                    } else {
                        $("#sendSuccess").html("");
                        $("#sendFailed").html("");
                        $("#sendFailed").html(result.msg);
                    }
                    $('#sendValidCodeBtn').removeAttr("disabled"); //移除disabled属性
                });
            }
            return false;
        }
    </script>
</div>
<div data-th-replace="~{fragment/footer :: footer}">...</div>
</body>
</html>